import optionsx from '@/Echarts/饼图1'
import * as echarts from 'echarts'
let options = JSON.parse(JSON.stringify(optionsx))
// const { echarts } = window

export default (element, data) => {
  const old = echarts.getInstanceByDom(element)
  if (old) old.dispose()
  const chart = echarts.init(element, 'theme');
  options.tooltip.formatter = '{a} <br/>{b}: {c} '+ data.unit +' ({d}%)';
  // eslint-disable-next-line no-unused-vars
  if (data.seriesData) {

    options.title = {
      text: "{a|"+data.title+"}\n\n{b|"+data.total+data.unit+"}",
      textStyle: {
        rich: {
          a: {
            color: "#fff",
            fontSize: 15,
            fontWeight: "bold",
            align: "center",
          },
          b: {
            fontSize: 15,
            color: "#fff",
            fontWeight: "bold",
            align: "center",
          }
        },
      },
      x: "9%",
      y: "40%",
    }
    options.legend = {
      data: [],
      backgroundColor: 'rgba(0, 0, 0, 0)',
      top: 'center',
      right: '1%',
      y: '20%',
      width: 20,
      itemGap: 10,
      textStyle: {
        rich: {
          one: {
            width: 60,
            align: "center",
            color: '#fff',
            fontSize: 16,
          },
          two: {
            width: 30,
            align: "center",
            color: '#fff',
            fontSize: 16,
          }
          , three: {
            width: 70,
            align: "center",
            color: '#fff',
            fontSize: 16,
          },
        },
      },
      formatter: (name) => {
        var total = 0;
        var target = 0;
        var rate = 0;

        if (name == '表头') {
          return `{one|指标}{two|数值}{two|占比}{three|去年同比}`;
        } else {
          const  seriesData = [...data.seriesData];
          const  e = seriesData.find(item=>item.name == name);
          rate = (e.value*100/data.total).toFixed(0);
          return `{one|${name}}{two|}{three|${e.value} ${data.unit}}{three|${rate}%}`;
        }
      }
    }
    options.series[0].radius=['45%', '60%'];
    options.series[0].center= ['35%', '50%'];
    options.series[0].roseType = false;
    options.legend.data = data.legendData;
    options.series[0].data = data.seriesData;
  }
  chart.setOption(options);
  return chart;
}
